<template>
  <div class="bookcase">
    <div v-if="isRead" class="reading">
      <!-- <pre>
        <code>{{ codes }}</code>
      </pre> -->
      <!-- <v-md-preview :text="codes"></v-md-preview> -->
      <!-- <MyMarkdownFile /> -->
       <!-- <div v-html="marked()"></div> -->
      <md-editor ref="mdEditorRef" v-model="codes" :auto-detect-code="true"
        :footers="['markdownTotal', 0, '=', 1, 'scrollSwitch']" />
      <div class="back" @click="()=>{ isRead = false}">返回</div>
    </div>
    <div class="noread" v-else>
      <div class="menu">
        <div v-for="(x, y) in menu" :key="y" @click="selectMenu(y)" :class="menuIdx == y ? 'active' : ''">
          {{ x }}
        </div>
      </div>
      <div class="list">
        <div v-for="(x, y) in list" :key="y" @click="selectList(y)" :class="listIdx == y ? 'active' : ''">
          {{ x }}
        </div>
      </div>
      <div class="book">
        <div v-for="(x, y) in books" :key="y" @click="selectBook(y)" :class="bookIdx == y ? 'active' : ''">
          {{ x.split('.')[0] }}
          <div v-if="bookIdx == y" @click="openBook" class="open">阅读</div>
        </div>
      </div>
    </div>
    <el-dialog v-model="show" :title="title" width="600">
      <el-form>
        <el-form-item label="输入名称">
          <el-input v-model="keyword" style="width: 600px;" @keyup.enter="submit"></el-input>
        </el-form-item>
        <el-form-item label="输入内容" v-if="formType == 3">
          <el-input type="textarea" :rows="10" v-model="content" style="width: 600px;" @keyup.enter="submit"></el-input>
        </el-form-item>
        <el-button @click="submit">确认</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import 'md-editor-v3/lib/style.css';
import { MdEditor } from 'md-editor-v3';
import system from '@/utils/system';
import { queryData } from '@/apis/mysql';

// import VMdPreview from '@kangc/v-md-editor/lib/preview';
// import '@kangc/v-md-editor/lib/style/preview.css';
// import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
// import '@kangc/v-md-editor/lib/theme/style/github.css';
// import MyMarkdownFile from './git.md';
// import marked from 'marked';
// // highlightjs
// import hljs from 'highlight.js';
// VMdPreview.use(githubTheme, {
//   Hljs: hljs,
// });
onMounted(() => {
  getPath()
})
const menu = ref([])
const menuIdx = ref(0)
const show = ref(false)
const isRead = ref(false)
const books = ref([])
const list = ref([])
const listIdx = ref(0)
const bookIdx = ref(0)
const formType = ref(1)
const title = ref('')
const keyword = ref('')
const content = ref('')
const codes = ref('')
let bookPath = ''
function getPath(){
  queryData({
    table: 'resources',
    data:{
      name: 'notes'
    }
  }).then((res)=>{
    let obj = res.data[0]
    bookPath = `${obj.disk}:/${obj.path}`
    // document.title = obj.title
    getMenu()
  })
}
const toolbars = {
  bold: true, // 粗体
  italic: true, // 斜体
  header: true, // 标题
  underline: true, // 下划线
  strikethrough: true, // 中划线
  mark: true, // 标记
  superscript: true, // 上角标
  subscript: true, // 下角标
  quote: true, // 引用
  ol: true, // 有序列表
  ul: true, // 无序列表
  link: true, // 链接
  imagelink: true, // 图片链接
  code: false, // code
  table: true, // 表格
  fullscreen: true, // 全屏编辑
  readmodel: true, // 沉浸式阅读
  htmlcode: true, // 展示html源码
  help: true, // 帮助
  /* 1.3.5 */
  undo: true, // 上一步
  redo: true, // 下一步
  trash: true, // 清空
  save: true, // 保存（触发events中的save事件）
  /* 1.4.2 */
  navigation: true, // 导航目录
  /* 2.1.8 */
  alignleft: true, // 左对齐
  aligncenter: true, // 居中
  alignright: true, // 右对齐
  /* 2.2.1 */
  subfield: true, // 单双栏模式
  preview: true, // 预览
}
function getMenu() {
  system.readDir(bookPath).then(res => {
    menu.value = res
    selectMenu(0)
  })
}

function localDir() {
  return bookPath + '/' +
    menu.value[menuIdx.value] + '/' +
    list.value[listIdx.value] + '/' +
    books.value[bookIdx.value]
}

// 选择目录
function selectMenu(y) {
  menuIdx.value = y
  system.readDir(bookPath + '/' + menu.value[y]).then(res => {
    if (res.length == 0) {
      list.value = []
      books.value = []
    } else {
      let arr = []
      res.map(x=>{
        if(x.includes('.md')){
          arr.push(x)
        }
      })
      list.value = arr
      listIdx.value = 0
      // selectList(listIdx.value)
    }
  })
}

// 选择分类
function selectList(y) {
  listIdx.value = y
  let dir = bookPath + '/' + menu.value[menuIdx.value] + '/' + list.value[y]
  bookIdx.value = 0
  system.readFile(dir).then(res => {
    // // console.log(res)
    codes.value = res
    isRead.value = true
  })
}

function selectBook(y) {
  bookIdx.value = y
  if (menuIdx.value == 0) {
    readBookContent(y)
  }
}
function change(value, render) {
  state.html = render;
  state.blogInfo.blogMdContent = value;
  state.blogInfo.blogContent = render;
}
//上传图片接口pos 表示第几个图片
function handleEditorImgAdd(pos, $file) {
  var formdata = new FormData();
  formdata.append('file', $file);
  state.$axios
    .post("http://localhost:8000/blogs/image/upload/", formdata)
    .then(res => {
      var url = res.data.data;
      state.$refs.md.$img2Url(pos, url);
      //这里就是引用ref = md 然后调用$img2Url方法即可替换地址
    });
}
function handleEditorImgDel() {
  // console.log('handleEditorImgDel');
  //我这里没做什么操作，后续我要写上接口，从七牛云CDN删除相应的图片
}
function goback() {
  show.value = !show.value
}
</script>

<style lang="scss" scoped>
.bookcase {
  width: 100%;
  height: 100%;
}

.noread {
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  padding: 20px;

  .menu {
    width: 100%;
    height: 40px;
    display: flex;
    flex-wrap: wrap;

    >div {
      width: 120px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
      user-select: none;
    }

    .active {
      color: #fff;
      background-color: #21e7d4;
    }
  }

  .list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    div {
      margin: 10px;
      border-radius: 10px;
      width: 150px;
      height: 60px;
      line-height: 60px;
      cursor: pointer;
      user-select: none;
      text-align: center;
      background-color: #ffe87f;
      color: #000;
    }

    .active {
      color: #f00;
    }

    .add {
      font-size: 24px;
      font-weight: 700;
    }
  }

  .book {
    width: 100%;
    overflow: auto;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;

    >div {
      margin: 10px;
      width: 100px;
      height: 140px;
      padding: 20px 6px;
      color: #fff;
      font-weight: 700;
      background-color: #2f4d7d;
      cursor: pointer;
      user-select: none;
      text-align: center;
      position: relative;

      >div {
        width: calc(100% - 12px);
        height: 24px;
        line-height: 24px;
        bottom: 10px;
        color: #ccc;
        border-radius: 12px;
        position: absolute;

        &.open {
          color: #fff;
          font-weight: 700;

          &:hover {
            color: #000;
            background-color: #fff;
          }
        }
      }
    }

    .active {
      font-weight: 700;
      background-image: linear-gradient(to right bottom, #5315ff, #e6c0ff);
    }
  }
}

.reading {
  width: 100%;
  height: 100%;
  position: relative;

  .content {
    height: 100%;
    display: flex;

    .chapter {
      width: 200px;
      height: 100%;
      overflow: auto;

      div {
        width: 100%;
        height: 40px;
        line-height: 40px;
        cursor: pointer;
        text-indent: 20px;
      }

      .active {
        color: #f00;
      }
    }

    .story {
      height: calc(100vh - 60px);
      padding: 20px;
      overflow: auto;

      h1 {
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: center;
      }

      div {
        text-indent: 30px;
        margin-bottom: 20px;
        cursor: pointer;
      }


      .active {
        color: #f00;
      }
    }
  }

  .control {
    width: 160px;
    height: 160px;
    position: fixed;
    border-radius: 50%;
    bottom: 90px;
    right: 30px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    left: calc(50% - 100px);

    >div:first-child {
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      margin-top: 20px;
    }

    >div:last-child {
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      >div {
        width: 50%;
        height: 40px;
        cursor: pointer;
        user-select: none;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}

.back{
  cursor: pointer;
  position: absolute;
  right: 100px;
  bottom: 2px;
  font-size: 14px;
  color: #666;
  display: flex;
  justify-content: center;
  align-items: center;
}

.md-editor{
  width: 100%;
  height: 100%;
}
.write {
  width: calc(100% - 100px);
  overflow: auto;
  padding: 0 50px;

  div {
    float: left;
    margin: 10px;
  }

  button {
    width: 100px;
  }

  input {
    width: 150px;
    height: 36px;
    text-indent: 12px;
  }
}
:deep(th){
  color: #000;
}
:deep(td){
  color: #000;
}
:deep(.md-editor-catalog-fixed){
  z-index: 99999 !important;
  // left: 0
}
</style>
